// 分段控制器（与tabs有点像），没合

import { View } from "@tarojs/components";

type SegmentedProps = {
  className?: string;
  active?: any;
  options: { label: string; value?: any }[];
};

type SegmentedEvents = {
  onSeleced?: (e: any) => void;
};

export default ({
  active,
  options,
  className,
  onSeleced,
}: SegmentedProps & SegmentedEvents) => {
  return (
    <View
      className={`flex bg-[#EEF1F4] rounded-full overflow-hidden ${className}`}
    >
      {options.map((item, index) => (
        <View
          className={`flex-center flex-auto p-1 rounded-full text-sm  ${
            (item.value ?? index) === active ? "bg-primary text-white" : ""
          }`}
          onClick={() => onSeleced?.(item.value ?? index)}
        >
          {item.label}
        </View>
      ))}
    </View>
  );
};
